<script setup lang="ts">
import { ref } from "vue";
import { useVModel } from "@vueuse/core";
import router from "@/router";
import { useRoute } from "vue-router";
import { allocationTypeList } from "@/utils/staticData";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import ChargerSelect from "@/components/ChargerSelect";
import { useSystemStoreWithOut } from "@/store/modules/system";
import { storeToRefs } from "pinia";
import { useMessage } from "@/hooks/useMessage";

const systemStore = useSystemStoreWithOut();
const { warehouseList } = storeToRefs(systemStore);
const { createConfirm } = useMessage();

const props = defineProps({
  inboundType: {
    type: Number,
    default: null
  },
  preWarehouseCode: {
    type: [String, Number],
    default: ""
  },
  rows: {
    type: Number,
    default: 0
  }
});

const emits = defineEmits(["update:preWarehouseCode"]);
const inboundTypeValue = useVModel(props, "inboundType", emits);
const multiTagsStore = useMultiTagsStoreHook();
const route = useRoute();
const formRef = ref(null);
const form = ref({
  allocationType: 1, // 调拨类型
  allocationCode: "", // 单据编号
  originWarehouseCode: "", // 调入仓库
  targetWarehouseCode: "", // 调出仓库
  memo: "", // 备注
  applicantId: "" // 申请人
});

const rules = ref({
  allocationType: [
    { required: true, message: "请选择调拨类型", trigger: "blur" }
  ],
  originWarehouseCode: [
    { required: true, message: "请选择调入仓库", trigger: "blur" }
  ],
  targetWarehouseCode: [
    { required: true, message: "请选择调出仓库", trigger: "blur" }
  ],
  applicantId: [{ required: true, message: "请选择申请人", trigger: "blur" }]
});

const goBack = () => {
  multiTagsStore.handleTags("splice", route.path);
  router.back();
};

const inboundTypeChange = (value: any) => {
  inboundTypeValue.value = value;
};

const handleWarehouseChange = (val: string | number) => {
  if (props.rows && !!props.preWarehouseCode) {
    createConfirm({
      message: "更换仓库后，将清空现有物料明细列表中的内容，是否继续？",
      center: false
    })
      .then(() => {
        emits("update:preWarehouseCode", val);
      })
      .catch(() => {
        form.value.originWarehouseCode = props.preWarehouseCode;
      });
  } else {
    emits("update:preWarehouseCode", val);
  }
};

const validateForm = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid: any) => {
      if (valid) resolve(true);
      else reject(false);
    });
  });
};

defineExpose({
  getForm: () => {
    return form.value;
  },
  validateForm
});
</script>

<template>
  <div class="applyForm">
    <div class="flex items-center justify-between flex-row pb-[16px]">
      <p class="text-[16px] font-bold">调拨管理信息</p>
      <el-button @click="goBack"
        ><svg-icon name="rollback" size="16" />&nbsp;返回</el-button
      >
    </div>
    <el-form ref="formRef" class="mb-[-16px]" :model="form" :rules="rules" inline>
      <el-form-item label="调拨类型" prop="allocationType">
        <el-select
          v-model="form.allocationType"
          filterable
          placeholder="请输入"
          @change="inboundTypeChange"
          clearable
        >
          <el-option
            v-for="item in allocationTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="调出仓库" prop="originWarehouseCode">
        <el-select
          v-model="form.originWarehouseCode"
          filterable
          placeholder="请输入"
          @change="handleWarehouseChange"
          clearable
        >
          <el-option
            v-for="item in warehouseList"
            :key="item.warehouseCode"
            :value="item.warehouseCode"
            :label="item.warehouseName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="调入仓库" prop="targetWarehouseCode">
        <el-select
          v-model="form.targetWarehouseCode"
          filterable
          placeholder="请输入"
          clearable
        >
          <el-option
            v-for="item in warehouseList"
            :key="item.warehouseCode"
            :value="item.warehouseCode"
            :label="item.warehouseName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="调拨单号" prop="allocationCode">
        <el-input
          v-model="form.allocationCode"
          disabled
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item label="申请人" prop="applicantId">
        <ChargerSelect v-model:value="form.applicantId" />
      </el-form-item>
      <el-form-item label="备注" prop="memo">
        <el-input
          v-model="form.memo"
          type="textarea"
          placeholder="请输入内容"
          maxlength="500"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped lang="scss">
.applyForm {
  overflow: hidden;
  .el-textarea {
    --el-textarea-height: 32px;
  }
}
</style>
